<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/element.css" rel="stylesheet"/>
    <link href="../css/styleindex.css" rel="stylesheet"/>
    <style>

    </style>
</head>
<body style="background:#EFF0F4;">

  <div class="mui-content">
    <div id="vm" class="x-examok" v-cloak>
      <div class="x-header-g" id="header">
        <a class="x-header-arrow" @click="api.closeWin()"></a>
        <div class="x-header-t">工作台-制定训练计划</div>
      </div>
      <!--  -->
      <div class="x-pro-list">
        <div class="x-pro-top">受训人姓名:{{username}}</div>
        <div class="x-pro-pro2">
          <div class="x-pro-row">
            <div class="x-pro-label">晋升通道</div>
            <div class="x-pro-input">
              <el-select v-model="upmodel" placeholder="请选择" :disabled="isfromindex" @change="upselect">
                <el-option v-for="item in updata" :key="item.id" :label="item.title" :value="item.id"></el-option>
              </el-select>
            </div>
          </div>
          <div class="x-pro-row">
            <div class="x-pro-label">现职位:</div>
            <div class="x-pro-input">
              {{leveltitle}}
            </div>
          </div>
          <div class="x-pro-row">
            <div class="x-pro-label">晋升职级</div>
            <div class="x-pro-input">
              <el-select v-model="uplevelmodel" placeholder="请选择" :disabled="isfromindex">
                <el-option v-for="item in upleveldata" :key="item.id" :label="item.title" :value="item.id"></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <!--  -->
      <!--  -->
      <div class="x-pro-list" v-show="isaddwork" v-for="(itemk,indexk) in workfor" :key="itemk.key">
          <!-- <el-collapse v-model="activeNames1">
            <el-collapse-item title="工作站" name="1"> -->
              <div class="x-pro-top" style="display:flex;justify-content:space-between">
                <div>工作站</div>
                <el-button type="danger" size="mini" round @click="removework(indexk)">删除</el-button>
              </div>
              <div class="x-pro-pro2">
                <div class="x-pro-row" style="border-bottom:1px solid #f5f5f5">
                  <div class="x-pro-label">学习工作站</div>
                  <div class="x-pro-input">
                    <el-select v-model="itemk.studyname" placeholder="请选择" :disabled="isfromindex" @change="workfun">
                      <el-option v-for="item in workstationdata" :key="item.id" :label="item.title" :value="item.id"></el-option>
                    </el-select>
                  </div>
                </div>
                <div class="x-pro-bb" v-for="(item,index) in itemk.enterwork" :key="item.key">

                  <div class="x-pro-row">
                    <div class="x-pro-label">学习内容</div>
                    <div class="x-pro-input">
                      <el-select v-model="item.study" placeholder="请选择" :disabled="isfromindex">
                        <el-option v-for="item in studyprodata" :key="item.id" :label="item.content" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">带训人</div>
                    <div class="x-pro-input">
                      <el-select v-model="item.person" placeholder="请选择" :disabled="isfromindex">
                        <el-option v-for="item in persondata" :key="item.id" :label="item.username" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">带训开始时间</div>
                    <div class="x-pro-input">
                      <el-date-picker v-model="item.starttime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :disabled="isfromindex" :editable="notkey"></el-date-picker>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">带训结束时间</div>
                    <div class="x-pro-input">
                      <el-date-picker v-model="item.endtime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :disabled="isfromindex" :editable="notkey"></el-date-picker>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">考核人</div>
                    <div class="x-pro-input">
                      <el-select v-model="item.examperson" placeholder="请选择" :disabled="isfromindex">
                        <el-option v-for="item in persondata" :key="item.id" :label="item.username" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">考核时间</div>
                    <div class="x-pro-input">
                      <el-date-picker v-model="item.examtime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :disabled="isfromindex" :editable="notkey"></el-date-picker>
                    </div>
                  </div>
                  <div class="x-pro-remove" @click="removeentrywork(index,indexk)" v-show="!isfromindex">删除</div>
                </div>
                <div class="x-pro-cssbtn" @click="goonstudypro(indexk)"  v-show="!isfromindex"><span class="x-pro-addicon"></span>添加学习内容</div>
              </div>
            <!-- </el-collapse-item>
          </el-collapse> -->
      </div>
      <!--  -->
      <div class="x-pro-addbox" @click="goonentrywork"  v-show="!isfromindex"><span class="x-pro-addicon"></span>添加学习工作站</div>
      <!--  -->
      <div class="x-pro-gobtn" @click="isok" v-show="!isfromindex">提交</div>
    </div>
  </div>

  <script type="text/javascript" src="../script/vue.js"></script>
  <script type="text/javascript" src="../script/element.js"></script>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/base.js"></script>
	<script>
apiready = function () {
    var tid = api.pageParam.id;



    //
    var vm = new Vue({
      el:'#vm',
      data(){
        return{
          thid:'',
          updata:'',//晋升通道
          isfromindex:false,
          upmodel:'',//晋升通道选中值
          username:'',
          leveltitle:'',
          uplevelmodel:'',//晋升职级
          upleveldata:'',//晋升职级
          upid:'',//晋升通道选中值id
          activeNames1: ['1'],
          workstation:'',
          workstationdata:'',
          isaddwork:false,//是否显示工作站
          // studypro:'',//学习内容
          studyprodata:'',//学习内容data
          enterwork:[{
            'study':'',
            'person':'',
            'starttime':'',
            'endtime':'',
            'examperson':'',
            'examtime':'',
            'index':0
          }],
          workfor:[],
          persondata:'',
          // getperson:'',
          // examperson:'',
          // prodation_date1:'',
          // prodation_date2:'',
          examokdate:'',
          entryworkindex:0,
          workforindex:0,
          arrforre:[],
          notkey:false,

        }
      },
      created:function() {
        var that=this;


      },
      mounted:function(){
        var that=this;
        that.thid = tid;
        that.getuserinfo()//人员信息
        that.getupdata()//晋升通道
        // that.getupleveldata()//晋升职级

      },
      methods: {
        //提交
        isok:function(){
          var that = this;
          console.log(JSON.stringify(that.workfor));
          api.ajax({
            url:baseurl+'api/practice/add',
            method:'post',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:that.thid,
                promoteid:that.upmodel,
                levelid:that.uplevelmodel,
                study_json:JSON.stringify(that.workfor)
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                api.alert({
                    title: '提交成功',
                    msg: '',
                }, function(ret, err) {
                  api.closeWin();
                });
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //删除工作站
         removework:function(index){
           let that = this;
           var nowin = index;
           console.log(JSON.stringify(that.workfor));
           api.confirm({
             title: '操作提示',
             msg: '确定要删除吗？',
             buttons: ['确定','取消']
           }, function(ret, err) {
             var index = ret.buttonIndex;
             if(index == 1){
               //删除
               that.workfor.splice(nowin,1);//删除全部数组中对应的值
               console.log(JSON.stringify(that.workfor));
             }
           });
         },
        //工作站 选中后 加载学习内容
        workfun:function(val){
          var that = this;
          console.log(val);
          that.getstudy(val)//学习内容

        },
        //添加学习内容
        goonstudypro:function(indexk){
          var that = this;
          that.entryworkindex++
          console.log(JSON.stringify(that.workfor[indexk].studyname));
          console.log(JSON.stringify(that.workfor[indexk].enterwork));
          that.workfor[indexk].enterwork.push({
            'study':'',
            'person':'',
            'starttime':'',
            'endtime':'',
            'examperson':'',
            'examtime':'',
            'index':that.entryworkindex
          })

          console.log(JSON.stringify(that.workfor));
        },
        //删除学习内容
        removeentrywork:function(index,indexk){
          let that = this;
          var nowin = index;
          console.log(indexk);
          console.log(JSON.stringify(that.workfor));
          api.confirm({
            title: '操作提示',
            msg: '确定要删除吗？',
            buttons: ['确定','取消']
          }, function(ret, err) {
            var index = ret.buttonIndex;
            if(index == 1){
              //删除
              that.arrforre = that.workfor[indexk].enterwork;
              console.log(nowin);
              that.arrforre.splice(nowin,1);//删除全部数组中对应的值
              console.log(JSON.stringify(that.workfor));
            }
          });
        },
        //人
        getpersondata:function(){
          let that=this;
          api.ajax({
            url:baseurl+'api/person/employee',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:that.thid
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.persondata = ret.data.list;

              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //学习内容
        getstudy:function(val){
          let that=this;
          api.ajax({
            url:baseurl+'api/practice/studyContent',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                promoteid:that.upmodel,
                levelid:that.uplevelmodel,
                wsid:val
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.studyprodata = ret.data.list;

              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //添加学习工作站
        goonentrywork:function(){
          var that = this;
          that.isaddwork = true;

          that.workforindex++
          console.log(that.workforindex);
          console.log(JSON.stringify(that.workfor));
          that.enterwork = [{
            'study':'',
            'person':'',
            'starttime':'',
            'endtime':'',
            'examperson':'',
            'examtime':'',
            'index':that.entryworkindex
          }];
          that.workfor.push({
            'studyname':'',
            'enterwork':that.enterwork,
            'index':that.workforindex,
          });
          console.log(JSON.stringify(that.workfor));
        },
        //工作站列表
        getworkstationdata:function(val){
          let that=this;
          api.ajax({
            url:baseurl+'api/practice/wsSection',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:val
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.workstationdata = ret.data.list;
                that.getpersondata()//人
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //晋升通道 选中值
        upselect:function(val){
          var that = this;
          console.log(val);
          that.uplevelmodel = '';//清空晋升职级
          //??
          // that.upid = val;
          that.getupleveldata(val)//晋升职级列表
          that.getworkstationdata(val)//工作站列表
        },
        //晋升职级
        getupleveldata:function(val){
          console.log(val);
          let that=this;
          api.ajax({
            url:baseurl+'api/practice/jobLevelBypromote',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:val
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.upleveldata = ret.data.list;
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //晋升通道
        getupdata:function(){
          let that=this;
          api.ajax({
            url:baseurl+'api/practice/promoteSection',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken')
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.updata = ret.data.list;
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //人员信息
        getuserinfo:function(){
          let that=this;
          api.ajax({
            url:baseurl+'api/practice/info',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:that.thid
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              // console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.username = ret.data.username;
                that.leveltitle = ret.data.level_title;

              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
      }
    })
	}


	</script>
</body>
</html>
